<template>
  <div>
  <div class="kystop-bar">
    <div class="kysheader-box">
      <div class="kystop-reg-log l">
        <span class="kysgo-log">欢迎光临本网站,请先 <nuxt-link to="/themes4">登录</nuxt-link>/
					<nuxt-link to="/register4">注册</nuxt-link></span>
        <span class="kysquick-log">
					<a  class="layui-btn" :href="site.qq"

             target="_blank">QQ登录</a> <!--              :href="pageData.qq" :href="pageData.wx"-->
					<nuxt-link to="/"
             class="layui-btn" style="margin-left: 6px;background: #009944;">微信登录</nuxt-link>
				</span>
      </div>
      <div class="kystop-r-menu">
        <ul class="kysfix">
          <!-- <li class="kyskyst-item"><a href="/orders4">我的订单</a></li>
          <li class="kyskyst-item"><a href="/complain4">我的投诉</a></li>
          <li class="kyst-item"><a href="/charge4"
                                   class="topchongzhi layui-btn">充值</a></li>
          <li class="kyskyst-item">
            <a onclick="return confirm(&#39;有事请直奔主题,不要问在不在&#39;)"
               target="_blank" :href="systemStyle.qqLink"
               class="topkf" style="border-left: 1px solid #999;">联系客服</a>
          </li>
          <li class="kyst-item" style="padding: 0 1px;">
            <a href="/account4" class="topkf" style="padding: 0 1px;">个人中心</a></li> -->
            <li class="kyskyst-item"><nuxt-link to="/orders4">我的订单</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/complain4">我的投诉</nuxt-link></li>
          <li class="kyst-item"><nuxt-link to="/charge4" class="topchongzhi layui-btn">充值</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/contact4" class="topkf" style="border-left: 1px solid #999;">联系客服</nuxt-link></li>
          <li class="kyst-item" style="padding: 0 1px;"><nuxt-link to="/account4" class="topkf" style="padding: 0 1px;">个人中心</nuxt-link></li>
<!--          <li  class="kyst-item" style="padding: 0 1px;" v-for="(item, index) in linkMenuDataTop" :key="index" v-if="index < 3">-->
<!--                <a class="topkf" style="padding: 0 1px;" v-if="item.menuTips" target="_blank" :href="item.menuLink">{{-->
<!--                    item.menuName-->
<!--                  }}</a>-->
<!--          </li>-->
<!--            <li class="kyst-item" style="padding: 0 1px;"  v-else>-->
<!--              <a class="topkf"-->
<!--                 style="padding: 0 1px;" target="_blank" :href="item.menuLink">{{-->
<!--                  item.menuName-->
<!--                }}</a>-->
<!--            </li>-->

        </ul>
      </div>
    </div>
  </div>
  <div class="common-header">
    <div class="common-container header-box">
      <a href="/">
        <img :src="site2.logo || placeHolderLogo" alt="网站logo图片"
             title="" class="logoimg">
      </a>
      <ul>
        <li><nuxt-link to="/" :class="{ headernavactive: idx === 0 }">首页</nuxt-link></li>
        <li><nuxt-link to="/category-list4"  :class="{ headernavactive: idx === 1 }">商品目录</nuxt-link></li>
        <li><nuxt-link to="/contact4" :class="{ headernavactive: idx === 2 }">客服中心</nuxt-link></li>

        <!-- <li><a href="/" :class="{ headernavactive: idx === 0 }">首页</a></li>
        <li><a href="/register4" :class="{ headernavactive: idx === 1 }">用户注册</a></li>
        <li><a href="/notice4" :class="{ headernavactive: idx === 2 }">公告信息</a></li> -->
        <li v-for="(item, index) in linkMenuDataTop" :key="index"  >
                <a :class="{ headernavactive: idx === index }" :href="item.menuLink">{{
                    item.menuName
                  }}</a>
        </li>
<!--            <li  v-else>-->
<!--              <a :class="{ headernavactive: idx === index }" :href="item.menuLink">{{-->
<!--                  item.menuName-->
<!--                }}</a>-->
<!--            </li>-->

<!--        <a href="javascript:void(0)" v-if="linkMenuDataTop.length>3" @click="showMoreBaiduLink">更多</a>-->
      </ul>
      <div class="kys-madestyle-search">
        <form class="layui-form">
          <div class="layui-input-inline" style="width:200px;">
            <input type="text" name="_keyword" required="" lay-verify="required" placeholder="请输入关键词"
                   autocomplete="off" class="layui-input" v-model="searchTxt">
          </div>
          <div class="layui-input-inline">
            <button @click.prevent="toSearchCatalog" class="layui-btn kys-madestyle-searchbtn" lay-submit="" lay-filter="search">搜索</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import fixupMixin from '@/mixins/fixup'
import qqservice from './qqservice'

export default {
  components: {
    qqservice
  },
  mixins: [fixupMixin],
  props: {
    title: {
      type: String,
      default: ''
    },

  },
  data() {
    let idx = -1
    if (this.$route.name === 'index4') {
      idx = 0
    } else if (this.$route.name === 'register4') {
      idx = 1
    } else if (~this.$route.name.indexOf('notice4')) {
      idx = 2
    }
    return {
      idx,
      linkMenuDataTop: [],
      site:{},
      site2:{},
      searchTxt: '',
      placeHolderLogo: require('~/assets/images/logo.jpg')
    }
  },
  created () {
    // console.log('pageData', this.pageData)
    this.getLinkMenuList()
  },
  computed: {
    ...mapState({
      // site: (state) => state.site,
      systemStyle: (state) => state.systemStyle
    })
  },
  methods: { setHomePage() {}, addToFav() {},
    toSearchCatalog () {
      this.$router.push({
        path: '/category-list4',
        query: {
          keywords: this.searchTxt
        }
      })
    },
    async getLinkMenuList() {

      let that = this
      const res = await this.$axios.get('/site/customMenu/listForDomain')
      if (res.code === 1001) {
        if (res.body) {
          that.linkMenuDataTop = res.body
        }
      }
      const f = await this.$axios.get('/user/qqConfig/getLoginUrl')
      if (f.code === 1001 && f.body) {
        this.site.qq = f.body
      }
      const window = {}
      if(window)
        this.site.qq = `https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101797373&redirect_uri=http://${window?.location?.host}/thirdRegister4&state=${window?.location?.host}`

      const res2 = await this.$axios.get('/site/siteExtend/getSiteExtend')
      if (res2.code === 1001) {
        this.site2=res2.body;
        // console.log("系统风格"+JSON.stringify( this.site2));
      }
    },
  }
}
</script>
<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style1/common.css';
// @import 'assets/style/style1/openlogin.css';
// @import 'assets/style/style1/style.css';
// @import 'assets/style/style1/font_1451715_0505c2bxv7b7.css';
</style>
<style scoped>
.kystop-bar {
    position: relative;
    z-index: 3;
    height: 36px;
    background: #ffffff;
    color: #a1a1a1;
    min-width: 1200px;
}
.kysheader-box {
    width: 1200px;
    margin: 0 auto;
}
.kystop-reg-log.l {
    float: left;
    position: relative;
    left: 5px;
}
span.kysgo-log {
    position: relative;
    z-index: 3;
    height: 36px;
    line-height: 32px;
    color: #a1a1a1;
    min-width: 1200px;
}
.kystop-r-menu {
    text-align: right;
}
ul.kysfix {
    list-style: none;
    float: right;
    position: relative;
    display: inline-block;
    height: 36px;
    text-align: left;
    line-height: 30px;
}
li.kyskyst-item {
    position: relative;
    display: inline-block;
    height: 36px;
    text-align: left;
    line-height: 30px;
}
.topchongzhi {
    font-size: 12px;
    display: inline-block;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #0089ed;
    border-radius: 4px;
    vertical-align: 0;
}
li.kyst-item {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 0 8px;
    text-align: left;
    line-height: 30px;
}
.kysquick-log a {
	display: inline-block;
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #0089ed;
    border-radius: 2px;
    vertical-align: 0;
}
.kyskyst-item a {
	font-size: 12px;
    padding: 0 8px;
    border-right: 1px solid #999;
}
.topkf {
	font-size: 12px;
    padding: 0 15px;
}
.logoimg{
	position: relative;
	float: left;
	width: 180px;
	height: 60px;
	margin-top: 10px;
	margin-right: 20px;
  object-fit: fill;
}
.header-box{
	overflow: hidden;
}
.header-box ul{
	float: left;
}
.header-box ul li{
	position: relative;
	float: left;
	line-height: 80px;
}
.header-box ul li a{
	padding: 0 20px;
	font-size: 16px;
	display: inline-block;
}
.header-box ul li:hover{
	background: transparent;
}
.header-box ul li:hover a{
    transition: all .3s ease-out;
    color: #0099ff;
}
.header-box ul li:hover a:after,.header-box ul li.header-nav-active a:after{
	content: '';
	display: block;
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    box-sizing: border-box;
    border-width: 0 25px;
    border-style: solid;
    border-color: #fff;
    height: 2px;
    background-color:#1E9FFF;
    transition: all .3s ease-out;
}
.header-box ul li.header-nav-active:hover{

}

.kys-madestyle-search{position:absolute;right:0;top:25px;}
.kys-madestyle-search .layui-input-inline{float:left;}
.kys-madestyle-search .layui-select-title input{border-radius:2px 0 0 2px;border-right:none;}
.kys-madestyle-searchbtn {
  height: 31px;
}
</style>

<style lang="scss">
.kystop-bar {
  min-width: unset !important;
  width: 1172px !important;
  margin: 0 auto !important;
  .kysheader-box {
    width: 100% !important;
  }
}
</style>
